<template>
  <div class="page">
    <LayoutHeader></LayoutHeader>
    <el-alert
      v-if="notice"
      class="notice"
      :title="`公告：${notice}`"
      type="warning">
    </el-alert>
    <div class="content">

      <!-- <h1 class="title">
        天章集团采购平台
      </h1> -->
      <div class="title">
        <img src="@/assets/title.png"/>
      </div>

      <div class="main">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-carousel class="ad" height="459px">
              <el-carousel-item v-for="(item, index) in banner" :key="index">
                <div class="banner" :style="{backgroundImage: `url(${item.url})`}"></div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12">
            <img class="contact" src="@/assets/contact.png" />
          </el-col>
        </el-row>
      </div>

      <div class="menus">
        <img src="@/assets/btn-1.png" @click="onClickPurchase"/>
        <img src="@/assets/btn-2.png" @click="$router.push('/supplier')"/>
      </div>

      <!-- <div class="menus">
        <el-row :gutter="100">
          <el-col :span="12">
            <el-card
              shadow="hover"
              class="menu-item"
              :body-style="{padding: `50px 20px`}"
              @click.native="onClickPurchase"
            >
              <i class="el-icon-shopping-cart-full" />
              采购
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card
              shadow="hover"
              class="menu-item"
              :body-style="{padding: `50px 20px`}"
              @click.native="$router.push('/supplier')"
            >
              <i class="el-icon-box" />
              供应
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-carousel height="400px">
        <el-carousel-item v-for="(item, index) in banner" :key="index">
          <div class="banner" :style="{backgroundImage: `url(${item.url})`}"></div>
        </el-carousel-item>
      </el-carousel> -->
    </div>
  </div>
</template>

<script>
import LayoutHeader from '@/layouts/LayoutHeader';
import { queryByType } from '@/api/setting';
import User from '@/store/user';

export default {
  components: {
    LayoutHeader,
  },

  data () {
    return {
      notice: '',
      banner: [],
    };
  },

  created () {
    this.getData();
  },

  methods: {
    async getData () {
      this.notice = await queryByType(1);
      this.banner = await queryByType(2);
    },

    onClickPurchase () {
      if (User.isLogin) {
        if (User.userInfo.role === 8) {
          this.$router.push('/purchase/offline');
        } else {
          this.$alert('无采购权限，请在右上角联系妥客服开通。');
        }
      } else {
        User.gotoLogin();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-image: url(~@/assets/bg.png);
}
.notice {
  margin: 20px auto;
  max-width: 1440px;
  min-width: 1000px;
}

.title {
  text-align: center;
  color: $--color-primary;
  margin: 30px 0 40px;
  img {
    width: 400px;
  }
  // font-size: 40px;
}

.main {
  position: relative;
  width: 1500px;
  margin: 0 auto;
  background-color: #C7061A;
  padding: 12px 12px 6px;
  .ad {
    border: 2px solid #fff;
  }
  .contact {
    width: 100%;
    display: block;
  }

}

.menus {
  // width: 800px;
  margin: 40px auto;
  text-align: center;
  img {
    margin: 0 50px;
    cursor: pointer;
  }
}

// .menu-item {
//   text-align: center;
//   font-size: 32px;
//   font-weight: 300;
//   color: $--color-primary;
//   border-color: $--color-primary;
//   cursor: pointer;
//   i {
//     margin-right: 10px;
//   }
// }

.banner {
  background-size: cover;
  background-position: center center;
  height: 100%;
}
</style>
